<template>
	<view>
		<uni-nav-bar left-icon="back" left-text="返回" :border="false" title="意见反馈"
		 status-bar fixed @clickLeft="backLastPage"></uni-nav-bar>
		 
		<divider></divider>
		<picker :value="indexPicker" @change="bindPickerChange" :range="arrayPicker">
			<view class="flex justify-between">
				<view class="m-3">{{arrayPicker[indexPicker]}}</view>
				<image class="m-3" src="/static/icon/lower.png" style="width: 50rpx; height: 50rpx;"></image>
			</view>
		</picker>
		<divider></divider>
		
		<textarea v-model="textareaValue" placeholder="对于我们的服务你还有什么意见吗？请告诉我们" class="w-100 m-3" />
		 
		<upload-image ref="uploadImage" :show="true" @changeImage="changeImage" :list="imageList"></upload-image>
		<view class="py-1" style="background-color: #F5F5F4;">
			<text class="mx-3 text-secondary font">手机号码</text>
		</view>
		<input type="number" v-model="inputValue" placeholder="方便与我们联系" class="border-0 m-3 font" />
		
		<divider></divider>
		
		<view class="flex align-center justify-center rounded-circle m-3 py-3"
		style="background-color: #60CB64;" @click="submit">
			<text style="color: #FFFFFF;">提交</text> 
		</view>
		
	</view>
</template>

<script>
	import uniNavBar from '@/components/uni/uni-nav-bar/uni-nav-bar.vue';
	import divider from '@/components/common/divider.vue';
	import uploadImage from '@/components/common/upload-image.vue';
	
	
	export default {
		components: {
			uniNavBar,
			divider,
			uploadImage
		},
		data() {
			return {
				arrayPicker: ["请选择反馈类型", '功能异常', '优化意见', '其他'],
				indexPicker: 0,
				imageList: [], // 选则的图片数组
				textareaValue: '',
				inputValue: ''
			}
		},
		methods: {
			backLastPage () {
				uni.navigateBack({
				    delta: 1
				});
			},
			changeImage(e) {
				this.imageList = e;
			},
			bindPickerChange (e) {
				this.indexPicker = e.target.value
			},
			submit() {
				console.log(this.indexPicker);
				console.log(this.arrayPicker[this.indexPicker]);
				console.log(this.imageList);
				console.log(this.textareaValue);
				console.log(this.inputValue);
			}
		},
		computed: {
		}
	}
</script>

<style lang="scss">
	.box-box {
		box-sizing: border-box;
	}
</style>
